<script setup lang="ts">
//引入用户相关的仓库，获取当前用户的头像，昵称
import {useAdminStore} from '@/stores/admin.ts'
import Whx from '@/assets/img/whx.jpg'
import Home from '@/assets/img/home.png'
import {getTime} from "@/utils/time.ts";
//获取存储用户信息的仓库对象
let adminStore = useAdminStore();
</script>

<template>
<el-card>
  <div class="box">
  <img :src="adminStore.adminInfo.avatar || Whx" alt="" class="image">
  <div class="bottom">
    <h1 class="title">{{getTime()}}{{adminStore.adminInfo.adminName}} </h1>
    <p class="subtitle">健身中心会员管理系统</p>
  </div>
  </div>
</el-card>
  <div class="welcome-container">
  <h2 class="welcome">欢迎来到健身中心会员管理系统</h2>
  <div class="home-image-container">
    <img :src="Home" alt="Home" class="home-image">
  </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  display:flex;
  .image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .bottom {
    margin-left:20px;
    .title {
      font-size:20px;
      font-weight:900;
      margin-bottom:30px;
  }
    .subtitle {
      font-size:20px;
      color:skyblue;
    }
  }
}
.welcome-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  margin-top: 30px;
}
.welcome {
   font-size: 30px;
   font-weight: 900;
   margin-top: 30px;
   color:cornflowerblue;
    writing-mode: vertical-rl; /* 使文本竖向排列 */
    text-orientation: upright; /* 使文本直立 */
  margin-right: 20px; /* 添加右边距 */
}

.home-image-container {
  display: flex;
  justify-content: center;
  margin-top: 20px
}
.home-image {
  width: 1000px; /* 调整图片宽度以放大图片 */
  height: auto;
}

</style>